<template>
  <el-table :data="tableData" style="width: 100%; height: 100%" stripe>
    <el-table-column prop="expertName" label="姓名" />
    <el-table-column prop="expertOffice" label="科室" />
    <el-table-column prop="expertHis" label="所属医院" />
    <el-table-column prop="expertIntro" min-width="370" label="简介" />
    <el-table-column label="操作" min-width="80">
      <template #default="scope">
        <div class="btn">
          <el-button
            link
            type="primary"
            style="font-size: 16px"
            size="small"
            @click="cancel(scope.row)"
            class="cancel"
            >取消</el-button
          >

          <el-button
            link
            type="primary"
            style="font-size: 16px"
            size="small"
            class="invite"
            @click="invite(scope.row)"
            >邀请</el-button
          >
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { onMounted } from "vue";
import { getAll } from "@/api/index.js";
const tableData = ref([]);

// 将数据传给父组件
const emit = defineEmits();
const exportData = ref([]);
// 邀请
const invite = (row) => {
  console.log(row);
  exportData.value.push(row);
  console.log(exportData.value,"223");
  
  emit("updateMessage", exportData.value);
};
// 取消
const cancel = (row) => {
  const index = exportData.value.findIndex((item) => item.expertId === row.expertId);
  if (index !== -1) {
    exportData.value.splice(index, 1);
  }
};

const userId = ref(1);
onMounted(() => {
  getAll(userId.value).then((res) => {
    console.log(res, "res");
    tableData.value = res;
  });
});
</script>

<style lang="scss" scoped>
.btn {
  display: flex;
  .cancel {
    color: #eb4f53;
  }
}
</style>
